<template>
  <span>
    <el-select v-model="value" placeholder="请选择拓扑图" size="small" style="position: absolute;">
        <el-option v-for="item in topoBaseInfo" :key="item.sysmapid" :label="item.name" :value="item.sysmapid">
        </el-option>
      </el-select>
      <div class="btn-group" style="float:right">
        <el-input v-model="input" placeholder="请输入名称" size='small' icon="search" @change="inputChangeAction"></el-input>
      </div>
  </span>
</template>
<script>
import Ajax from 'api/customajax'
import eventHubs from 'common/eventHubs'
import addTopoEle from 'common/topo/addTopoElement'
import sysmap1iconjson from 'mock/topo/sysmap1icon.json'
import sysmap2iconjson from 'mock/topo/sysmap2icon.json'
import sysmap1json from 'mock/topo/sysmap1.json'
import sysmap2json from 'mock/topo/sysmap2.json'
export default {
  data() {
    return {
      value: '',
      input: '',
      graphView: null,
      treeView: null,
      topoBaseInfo: [],
    }
  },
  mounted() {
    this.addEventListener();
    this.initTopoData();

  },
  props: {
    topoBaseDataUrl: {
      style: String,
      default: function() {
        return ''
      }
    },
    iconDataUrl: {
      style: String,
      default: function() {
        return ''
      }
    },
    topoDataByIdUrl: {
      style: String,
      default: function() {
        return ''
      }
    }
  },
  methods: {
    addEventListener() {
      const self = this;
      // 事件处理
      eventHubs.getEventHub().$on('topoGraphView', (topoGraphView) => { //Hub接收事件
        self.graphView = topoGraphView;
      });
      eventHubs.getEventHub().$on('topoTreeView', (topoTreeView) => {
        self.treeView = topoTreeView;
      });
    },
    inputChangeAction() {
      const self = this;
      if (self.treeView != null && self.treeView != undefined) {
        if (self.input != '') {
          self.treeView.setVisibleFunc(function(data) {
            return data._name.indexOf(self.input) >= 0 ? true : false;
          });
        } else {
          self.treeView.setVisibleFunc(function(data) {
            return true;
          });
        }
      }
    },
    initTopoData() {
      const self = this;
      Ajax.query(this.topoBaseDataUrl).then(response => {
        self.topoBaseInfo = response.data;
        if (response.data.length > 0) {
          self.value = response.data[0].sysmapid
        }
      });
    },
    createTopoGraph(topoId) {
      // 情况dataModel
      const dataModel = this.graphView.getDataModel();
      dataModel.clear();
      const self = this;

      if (topoId == 2) {
        self.currentMapData = sysmap2json[0];
      } else {
        self.currentMapData = sysmap1json[0];
      }

      addTopoEle.setTopoStyle(self.currentMapData, self.graphView, self.$store.state.topo.topoIconData);
      // 这里必须同步请求
      // Ajax.syncQuery(this.topoDataByIdUrl + topoId, {}, function(data) {
      //   self.currentMapData = data[0];
      //   addTopoEle.setTopoStyle(data[0], self.graphView, self.$store.state.topo.topoIconData);
      // });
    },
    layout() {
      const self = this;
      // 布局设置
      this.autoLayout = new ht.layout.AutoLayout(this.graphView);
      // this.autoLayout.setAnimate(animate);
      this.autoLayout.layout('symmetric', function() {
        self.graphView.fitContent(true);
      });
    },
    initTopoIconData(topoId) {
      const self = this;
      let url = this.iconDataUrl + topoId;
      // if (topoId.indexOf('local') == 0) {
      //   url = this.userIconDataUrl;
      // }
      if (topoId == 2) {
        self.$store.dispatch('setTopoIconData', sysmap2iconjson);
      } else {
        self.$store.dispatch('setTopoIconData', sysmap1iconjson);
      }
      // Ajax.syncQuery(url, {}, function(data) {
      //   self.$store.dispatch('setTopoIconData', data);
      // });
    },
  },
  watch: {
    value: function(newValue, oldValue) {
      if (newValue != oldValue) {
        this.initTopoIconData(newValue);
        this.createTopoGraph(newValue);
        this.layout();
      }
    }
  }
}
</script>
